<template>
	<view>
		<view class="container" v-if="type === '1'">
			<view class="item" v-for="(item, index) in listData1" :key="item.key" >
				<view class="item-ico" v-if="index===0" ><image :src="item.ico"></image></view>
				<view class="item-ico1" v-if="index===1" ><image :src="item.ico"></image></view>
				<view class="item-text">{{ item.key }}</view>
			</view>
		</view>
		<view class="container" v-if="type === '2'">
			<view class="item" v-for="(item, index) in listData2" :key="item.key" >
				<view class="item-ico" v-if="index===1" ><image :src="item.ico"></image></view>
				<view class="item-ico1" v-else ><image :src="item.ico"></image></view>
				<view class="item-text" >{{ item.key }}</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		type: {
			type: String,
			default: '1'
		}
	},
	data() {
		return {
			listData1: [
				{
					key: '双列展示',
					ico: 'http://imgv.bawangdao.com/static/image/index/switch.png'
				},
				{
					key: '距离排序',
					ico: 'http://imgv.bawangdao.com/static/image/index/down.png'
				}
			],
			listData2: [
				{
					key: '分类',
					ico: 'http://imgv.bawangdao.com/static/image/index/down.png'
				},
				{
					key: '单列展示',
					ico: 'http://imgv.bawangdao.com/static/image/index/switch.png'
				},
				{
					key: '距离排序',
					ico: 'http://imgv.bawangdao.com/static/image/index/down.png'
				}
			]
		};
	}
};
</script>

<style lang="less">
.container {
	height: 60rpx;
	margin: 10rpx 30rpx;
	border-radius: 20rpx;
	background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.1) 100%);
	border-radius: 20rpx 20rpx 0rpx 0rpx;
	display: flex;
	justify-content: center;
	.item {
		width: calc(100% - 60rpx / 2);
		display: flex;
		justify-content: center;
		height: 80rpx;
		color: #999999;
		font-size: 28rpx;
		text-align: center;
		.item-ico {
			width: 14px;
			height: 80rpx;
			line-height: 80rpx;
			image {
				width: 14px;
				height: 14px;
				margin: 28rpx 30rpx 0 0;
			}
		}
		.item-ico1 {
			width: 14px;
			height: 80rpx;
			line-height: 80rpx;
			image {
				width: 20rpx;
				height: 16rpx;
				margin: 28rpx 30rpx 0 0;
			}
		}
		.item-text {
			height: 80rpx;
			line-height: 80rpx;
		}
	}
	// .item::after{
	// 	content: "丨";
	// 	height: 40px;
	// 	color: #979797;
	// 	margin-left: 30px;
	// 	transform: translateY(8px);
	// }
	// .item:last-child::after{
	// 	content: "";
	// 	height: 40px;
	// 	color: #979797;
	// 	margin-left: 30px;
	// 	transform: translateY(8px);
	// }
}
</style>
